<template>
  <div class="register_container">
    <div class="register_box">
      <div  class="register-from">
      <div class="title">用户注册</div>        
        <div class="header">    
            <span class="login">
              <em class="bold">已有账号？</em>
              <a href="/login">
                <el-button type="primary" size="small">登录</el-button>
              </a>
            </span>
        </div>
        <el-form
            ref="registerForm"
            :model="registerForm"
            :rules="rules"
            label-width="100px">
              <el-form-item label="用户" prop="username">
                <el-input v-model="registerForm.username"  placeholder="请输入用户名" />
              </el-form-item>
               <el-form-item label="工号" prop="jobNumber">
                <el-input v-model="registerForm.jobNumber"  placeholder="请输入工号"/>
              </el-form-item>
              <el-form-item label="手机号码" prop="mobile" >
                <el-input v-model="registerForm.mobile" placeholder="请输入手机号码"/>               
              </el-form-item>                   
              <el-form-item label="创建密码" prop="password">
                <el-input v-model="registerForm.password" type="password" placeholder="请输入密码"/>
              </el-form-item>
              <el-form-item label="确认密码" prop="cpwd">
                <el-input v-model="registerForm.cpwd" type="password" placeholder="请确认密码" />
              </el-form-item>
              <!-- 按钮区域 -->
              <el-row>
                <el-col :span="8">
                  <a href="/login"><h6 v-if="isdown">{{countdown}}秒后自动跳转</h6></a>
                </el-col>
                <el-col :span="16" style="float: right">
                  <div  class="btns">
                    <el-button type="info" @click="resetForm">重置</el-button>  
                    <el-button type="primary" @click="registerClick" :loading="loading">注册</el-button>         
                  </div>
                </el-col>
              </el-row>            
          </el-form>        
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    // 验证手机号码的规则
    var checkMobile = (rule, value, cb) => {
        const regMobile = /^[1][3,4,5,7,8][0-9]{9}$/
        if (regMobile.test(value)) {
            return cb()
        }
        cb(new Error('请输入合法的手机号码'))
    }        
    var checkPwd =  (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.registerForm.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
    } 
    return {    
      loading: false,   
      countdown: 5,
      isdown: false,
      registerForm: { 
        jobNumber: "",
        mobile: "",
        password: "",
        cpwd:"",
        username: "",
        email: "chenqi819@yeah.net"
      },
      rules: {       
        username: [
          {required: true,message: '请输入用户名',trigger: 'blur'},
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
        jobNumber: [
          {required: true,message: '请输入工号',trigger: 'blur'},
          { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
          ],
        mobile: [
          {required: true,message: '请输入手机号码',trigger: 'blur'},
          { validator: checkMobile, trigger: 'blur' }
          ],
        password: [
          {
          required: true,message: '创建密码',trigger: 'blur'},
          { min: 6, message: '长度不少于6个字符', trigger: 'blur' }
          ],
        cpwd: [
          {required: true,message: '确认密码',trigger: 'blur'},
          {validator:checkPwd,trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    resetForm() {
      // 画面重置
      this.$refs.registerForm.resetFields()
    },
    // 注册
    registerClick() {        
      //表单验证
      this.$refs.registerForm.validate( async valid => {
        if (valid) {      
          this.loading = true    
          await this.$http.post('/sys/user/regis', this.getData).then( ({ data:res }) =>{            
            this.loading = false
            if (res.code !== 2000) {
              return this.$message.error(res.msg)              
            }else{
              this.$message.success('用户注册成功')
              this.isdown = true
              setInterval( ()=>{
                this.countdown--
                if (this.countdown === 0)
                    this.$router.push('/login')
                }
                ,1000)             
            } 
          }).catch(error =>{
            console.log('请求失败'+error)
            this.loading = false
          }) 
        }
      })      
    }    
  },
  computed: {
      getData() {
        /* json格式提交： */       
        return JSON.stringify(this.registerForm)
      }
  }
}
</script>

<style>

.register_container {
  height: 100%;
  background-image:url('../../assets/img/ng.png');  
  }
.register_box{
   width: 450px;
  height:470px;
  background-color: #FFF;
  border-radius:3px;   /* 圆角边框 */
   /* div居中 */
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);   /* 横轴位移自身-50%，纵轴自身-50%*/
  }

  .register-from{
    position: absolute;    
    width: 100%;
    padding: 20px;
    box-sizing:border-box;
}
  
.header {
    text-align: right;
    margin: 10px 0px;
  }
.register {
    color: #1890ff;
  }
.el-steps{
    text-align: center;
    width: 100%;
  }
  .section {
  width: 100%;
  }

  .footer{
    text-align: center;
  }
  .textarea{
    margin: 0 0;
  }
.btns{
   float: right;
}
.title{
  font-size: 24px;
  text-align: center;
}
.jump{
  width: 100%; 
  float: left;
  }

</style>
